<template>
  <div class="content">
    <el-dialog
      title="课程信息录入"
      :visible.sync="dialogFormVisible"
      class="dialog"
    >
      <el-form :model="course">
        <el-form-item label="课程名称" :label-width="formLabelWidth">
          <el-col :span="9">
            <el-input v-model="course.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="课程人数" :label-width="formLabelWidth">
          <el-col :span="4">
            <el-input v-model="course.number"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="学分" :label-width="formLabelWidth">
          <el-col :span="4">
            <el-input v-model="course.credit"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="课程种类" :label-width="formLabelWidth">
          <el-col :span="6">
            <el-select v-model="course.courseKind.id">
              <el-option
                v-for="item in kinds"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="执教教师" :label-width="formLabelWidth">
          <el-col :span="6">
            <el-select v-model="course.teacher.id">
              <el-option
                v-for="item in teachers"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="上课时间" :label-width="formLabelWidth">
          <el-col :span="9">
            <el-input v-model="course.time"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="课程信息修改"
      :visible.sync="dialogFormVisible1"
      class="dialog"
    >
      <el-form :model="courseInfo">
        <el-form-item label="课程名称" :label-width="formLabelWidth">
          <el-col :span="9">
            <el-input v-model="courseInfo.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="课程人数" :label-width="formLabelWidth">
          <el-col :span="4">
            <el-input v-model="courseInfo.number"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="学分" :label-width="formLabelWidth">
          <el-col :span="4">
            <el-input v-model="courseInfo.credit"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="课程种类" :label-width="formLabelWidth">
          <el-col :span="6">
            <el-select
              v-model="courseInfo.courseKind.id"
              :placeholder="kind_name"
            >
              <el-option
                v-for="item in kinds"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="执教教师" :label-width="formLabelWidth">
          <el-col :span="6">
            <el-select
              v-model="courseInfo.teacher.id"
              :placeholder="teacher_name"
            >
              <el-option
                v-for="item in teachers"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="上课时间" :label-width="formLabelWidth">
          <el-col :span="9">
            <el-input v-model="courseInfo.time"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="文件信息"
      :visible.sync="dialogFormVisible2"
      class="dialog"
    >
      <el-form :model="file">
        <el-form-item label="文件路径" :label-width="formLabelWidth">
          <el-col :span="20">
            <el-input v-model="file.filePath"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="文件名称" :label-width="formLabelWidth">
          <el-col :span="10">
            <el-input v-model="file.name"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="exportExcelCourse">确 定</el-button>
      </div>
    </el-dialog>
    <div>
      <el-input
        v-model="name"
        placeholder="请输入课程名称"
        class="search-input"
      ></el-input>
      <el-button
        icon="el-icon-search"
        circle
        @click="findPageByName"
      ></el-button>
    </div>
    <el-row type="flex" justify="end">
      <el-col :span="2"
        ><el-button size="small" @click="dialogInit1"
          >导出数据</el-button
        ></el-col
      >
      <el-col :span="2"
        ><el-button type="primary" size="small" @click="dialogInit"
          >添加课程</el-button
        ></el-col
      >
      <el-col :span="2"
        ><el-button type="danger" size="small" @click="deleteAll"
          >删除选中</el-button
        ></el-col
      >
    </el-row>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="100"> </el-table-column>
      <el-table-column prop="name" label="课程名称" width="160">
      </el-table-column>
      <el-table-column prop="courseKind.name" label="课程种类" width="160">
      </el-table-column>
      <el-table-column prop="number" label="限定人数" width="160">
      </el-table-column>
      <el-table-column prop="credit" label="学分" width="160">
      </el-table-column>
      <el-table-column prop="teacher.name" label="执教教师" width="160">
      </el-table-column>
      <el-table-column prop="time" label="上课时间" width="160">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        background
        layout="total, prev, pager, next"
        :total="totalSize"
        class="page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  inject: ["reload"],
  data() {
    return {
      tableData: [],
      ids: [],
      multipleSelection: [],
      teachers: [],
      kinds: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      course: {
        name: "",
        number: "",
        remaining: "",
        credit: "",
        time: "",
        teacher: {
          id: ""
        },
        courseKind: {
          id: ""
        }
      },
      formLabelWidth: "120px",
      courseInfo: {
        name: "",
        number: "",
        credit: "",
        time: "",
        teacher: {
          id: ""
        },
        courseKind: {
          id: ""
        }
      },
      // 文件信息
      file: {
        filePath: "",
        name: "",
        content: []
      },
      teacher_name: "",
      kind_name: "",
      // 分页参数
      currentPage: 1,
      pageSize: 6,
      totalSize: 0,
      // 要查找的课程名称
      name: ""
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    dialogInit: function() {
      this.dialogFormVisible = true;
      this.course.name = "";
      this.course.number = "";
      this.course.time = "";
      this.course.credit = "";
      this.course.teacher.id = "";
      this.course.courseKind.id = "";
    },
    dialogInit1: function() {
      this.file.filePath = "";
      this.file.name = "";
      this.dialogFormVisible2 = true;
    },
    findPage: function() {
      const pageRequest = {
        pageNumber: this.currentPage,
        pageSize: this.pageSize
      };
      this.$api.course
        .findPage(pageRequest)
        .then(response => {
          this.tableData = response.content;
          this.totalSize = response.totalElements;
        })
        .catch(error => {
          console.log(error);
        });
    },
    findPageByName: function() {
      const pageRequest = {
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
        name: this.name
      };
      this.$api.course
        .findPageByName(pageRequest)
        .then(response => {
          this.tableData = response.content;
          this.totalSize = response.totalElements;
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleCurrentChange() {
      if (this.name === "") {
        this.findPage();
      } else {
        this.findPageByName();
      }
    },
    findAllTeacher: function() {
      this.$api.teacher
        .findAll()
        .then(response => {
          this.teachers = response;
        })
        .catch(error => {
          console.log(error);
        });
    },
    findAllKinds: function() {
      this.$api.courseKind
        .findAll()
        .then(response => {
          this.kinds = response;
        })
        .catch(error => {
          console.log(error);
        });
    },
    exportExcelCourse: function() {
      const fileInfo = {
        path: this.file.filePath,
        name: this.file.name,
        content: this.tableData
      };
      this.$api.course
        .exportExcelCourse(fileInfo)
        .then(response => {
          if (response.code === 200) {
            this.dialogFormVisible2 = false;
            this.$successInfo(response.message);
          } else {
            this.dialogFormVisible2 = false;
            this.$errorInfo(response.message);
          }
        })
        .catch(error => {
          this.dialogFormVisible2 = false;
          console.log(error);
        });
    },
    add: function() {
      if (this.course.name === "") {
        this.dialogFormVisible = false;
        this.$errorInfo("课程名称不能为空");
      } else if (this.course.time === "") {
        this.dialogFormVisible = false;
        this.$errorInfo("上课时间不能为空");
      } else if (this.course.teacher.id === "") {
        this.dialogFormVisible = false;
        this.$errorInfo("教师不能为空");
      } else if (this.course.courseKind.id === "") {
        this.dialogFormVisible = false;
        this.$errorInfo("种类不能为空");
      } else {
        this.course.c_remaining = this.course.num;
        this.$api.course
          .add(this.course)
          .then(response => {
            if (response.code === 200) {
              this.dialogFormVisible = false;
              this.$successInfo(response.message);
              this.reload();
            } else {
              this.dialogFormVisible = false;
              this.$errorInfo(response.message);
            }
          })
          .catch(error => {
            this.$errorInfo("网络异常");
            console.log(error);
            this.dialogFormVisible = false;
          });
      }
    },
    update: function() {
      if (this.courseInfo.name === "") {
        this.dialogFormVisible = false;
        this.$errorInfo("课程名称不能为空");
      } else if (this.courseInfo.time === "") {
        this.dialogFormVisible = false;
        this.$errorInfo("上课时间不能为空");
      } else if (this.courseInfo.teacher.id === "") {
        this.dialogFormVisible = false;
        this.$errorInfo("教师不能为空");
      } else if (this.courseInfo.courseKind.id === "") {
        this.dialogFormVisible = false;
        this.$errorInfo("种类不能为空");
      } else {
        this.$api.course
          .update(this.courseInfo)
          .then(response => {
            if (response.code === 200) {
              this.dialogFormVisible1 = false;
              this.$successInfo(response.message);
              this.reload();
            } else {
              this.dialogFormVisible1 = false;
              this.$errorInfo(response.message);
            }
          })
          .catch(error => {
            this.dialogFormVisible1 = false;
            this.$errorInfo("网络异常");
            console.log(error);
          });
      }
    },
    handleEdit(index, row) {
      this.courseInfo = row;
      this.teacher_name = this.courseInfo.teacher.name;
      this.kind_name = this.courseInfo.courseKind.name;
      this.dialogFormVisible1 = true;
    },
    handleDelete(index, row) {
      // eslint-disable-next-line camelcase
      const id = row.id;
      this.$api.course
        .del(id)
        .then(response => {
          if (response.code === 200) {
            this.$successInfo(response.message);
            this.reload();
          } else {
            this.$errorInfo(response.message);
          }
        })
        .catch(error => {
          this.$errorInfo("网络异常");
          console.log(error);
        });
    },
    deleteAll: function() {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.ids.push(this.multipleSelection[i].id);
      }
      if (this.ids.length === 0) {
        this.$errorInfo("当前未选中任何课程");
      } else {
        this.$api.course
          .delAll(this.ids)
          .then(response => {
            if (response.code === 200) {
              this.$successInfo(response.message);
              this.reload();
              this.ids.length = 0;
            } else {
              this.$errorInfo(response.message);
              this.ids.length = 0;
            }
          })
          .catch(error => {
            this.$errorInfo("网络异常");
            console.log(error);
            this.course_ids.length = 0;
          });
      }
    }
  },
  created() {
    this.findPage();
    this.findAllTeacher();
    this.findAllKinds();
  }
};
</script>

<style scoped lang="scss">
.content {
  margin-top: 50px;
  position: relative;

  .search-input {
    width: 200px;
    margin-left: 20px;
    margin-right: 20px;
  }

  .page {
    position: absolute;
    top: 290px;
    left: 200px;
  }
}
</style>
